<template lang="pug">
  .avatarGroup
    el-avatar.imgBox(v-for="item in curList.showList" :key="item[prop.key]" :src="item[prop.url]" :size="size" v-bind="avatarProps")
    el-popover(placement="top-start" trigger="hover" v-if="curList.toolList.length > 0")
      el-avatar.toolImgBox(v-for="item in curList.toolList" :key="item[prop.key]" :src="item[prop.url]" :size="size" v-bind="avatarProps")
      el-avatar.imgBox.maxBox(:size="size" :style="maxStyle" v-bind="avatarProps" slot="reference") {{curList.toolList.length}}+
</template>
<script>
export default {
  name: 'AvatarGroup',
  props: {
    // 头像列表
    list: {
      type: Array,
      default: () => ({})
    },
    // 大小
    size: {
      type: Number,
      default: 40
    },
    avatarProps: {
      type: Object,
      default: () => ({})
    },
    // 最多显示
    maxCount: {
      type: Number,
      default: 5
    },
    // 最多显示项样式
    maxStyle: {
      type: Object,
      default: () => ({
        color: '#fff',
        backgroundColor: '#DA473A'
      })
    },
    prop: {
      type: Object,
      default: () => ({ url: 'url', key: 'id' })
    }
  },
  computed: {
    curList () {
      const { list, maxCount } = this
      const showList = []
      const toolList = []
      list.map((x, index) => {
        if (index < maxCount) {
          showList.push(x)
        } else {
          toolList.push(x)
        }
      })
      return {
        showList,
        toolList
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.imgBox {
  border: 1px solid #fff;
  + .imgBox{
    margin-left: -12px
  }
}

.toolImgBox{
  + .toolImgBox{
    margin-left: 5px;
  }
}

.maxBox{
  margin-left: -12px;
  cursor: pointer;
  font-weight: lighter;
  font-size: 13px;
}
</style>
